<!--
 * @Description:动画基本原理
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-23 21:52:38
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>动画基本原理</title>
	<style>
		#div1 {
			width: 100px;
			height: 100px;
			background: pink;
			position: absolute;
			left: 0px;
			top: 50px;
		}
	</style>
	<script>
		window.onload = function () {
			function $(id) {
				return document.getElementById(id);
			}
			var btn = $("button1")
			var div = $("div1")
			var timer = null
			btn.onclick = function () {
				timer = setInterval(() => {
					if (div.offsetLeft > 400) {
						clearInterval(timer)
					}
					div.style.left = div.offsetLeft + 10 + "px"
				}, 30)

			}
		}
	</script>
</head>

<body>
	<button id="button1">开始</button>
	<div id="div1">

	</div>
</body>

</html>